<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击变换样式</title>
</head>

<body>
    <div>曹操</div>
    <div>项羽</div>
    <div>张飞</div>

    <p>曹操1</p>
    <p>项羽1</p>
    <p>张飞1</p>
</body>
<script>
    //获取多个li
    // 第一种方法:
    // var div = document.getElementsByTagName("div");
    // var p = document.getElementsByTagName("p");
    // for (var i = 0; i < div.length; i++) {
    //     //分别对每一个LI触发点击事件
    //     div[i].onclick = (function(s) {
    //         return function() {
    //             p[s].style.color = "red";
    //         };
    //     })(i);
    // }
    // 第二种方法:
    let div = document.getElementsByTagName("div");
    let p = document.getElementsByTagName("p");
    for (let i = 0; i < div.length; i++) {
        div[i].onclick = function() {
            for (let j = 0; j < p.length; j++) {
                if (i == j) {
                    p[j].style.color = "red";
                } else if (i != j) {
                    p[j].style.color = "black";
                }
            }
        }
    }
</script>

</html>